<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>fullpage</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css">-->
		<style>
			.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
		</style>
		<link href="//cdn.bootcss.com/fullPage.js/2.7.2/jquery.fullPage.min.css" rel="stylesheet">
		<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
		<script src="//cdn.bootcss.com/fullPage.js/2.7.2/jquery.fullPage.min.js"></script>
		<!--<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>-->
		<script type="text/javascript">
			$(function(){
				$('#dowebok').fullpage({
					sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
					navigation:true,
					css3: true
				});
			});
		</script>
	</head>

	<body>
		<div id="dowebok">
			<div class="section">
				<h3>第一屏</h3>
				<p>fullPage.js — 基本演示</p>
				<div style="width: 100%;margin: 0 auto;"><br/><br/><img onclick="$.fn.fullpage.moveSectionDown();" src="up.gif"/></div>
			</div>
			<div class="section">
				第二屏
				<div style="width: 100%;margin: 0 auto;"><br/><br/><img onclick="$.fn.fullpage.moveSectionDown();" src="up.gif"/></div>
			</div>
			<div class="section">
				<h3>第三屏</h3>
				<div style="width: 100%;margin: 0 auto;"><br/><br/><img onclick="$.fn.fullpage.moveSectionDown();" src="up.gif"/></div>
			</div>
			<div class="section">
				<h3>第四屏</h3>
				<p>这是最后一屏</p>
			</div>
		</div>
	</body>

</html>